<template>
	<view class="wrap">
		<!-- 轮播图 -->
		<u-swiper :height="400" :list="imgList" :title="false" @click="imgListClick" />
		<!-- 图标组 -->
		<view class="workbench-title" />
		<view class="toolbar">
			<u-grid class="grid" :col="4" :border="false">
				<u-grid-item @click="navTo('find-venue')">
					<view class="home-icon icon-color05">
						<i class="iconfont icon-huiyishi"></i>
					</view>
					<view class="grid-text">找场馆</view>
				</u-grid-item>
				<u-grid-item @click="navTo('find-teacher')">
					<view class="home-icon icon-color12">
						<i class="iconfont icon-ribao"></i>
					</view>
					<view class="grid-text">约教练</view>
				</u-grid-item>
				<u-grid-item @click="navTo('')">
					<view class="home-icon icon-color03">
						<i class="iconfont icon-chucha"></i>
					</view>
					<view class="grid-text">推荐</view>
				</u-grid-item>
				<u-grid-item @click="navTo('')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-tongzhi"></i>
					</view>
					<view class="grid-text">代办</view>
				</u-grid-item>
				<u-grid-item :index="0" @click="navTo('/pages/sys/workbench/add-form')">
					<view class="home-icon icon-color01">
						<i class="iconfont icon-qingjia"></i>
					</view>
					<view class="grid-text">请假申请</view>
				</u-grid-item>
				<u-grid-item :index="1" @click="navTo('')">
					<view class="home-icon icon-color04">
						<i class="iconfont icon-hetongguanli"></i>
					</view>
					<view class="grid-text">合同申请</view>
				</u-grid-item>
				<u-grid-item @click="navTo('/pages/sys/workbench/install')">
					<view class="home-icon icon-color13">
						<i class="iconfont icon-tianjia" style="color:#90949d;"></i>
					</view>
					<view class="grid-text">添加常用</view>
				</u-grid-item>
			</u-grid>
			<u-grid class="grid" :col="2" :border="true">
				<u-grid-item @click="navTo('')" v-for="index in 50" :key="index">
					<u-image :src="egImg" mode="widthFix" />
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 底部提示 -->
		<u-back-top :scroll-top="scrollTop" icon="arrow-up" :duration='1000' />
		<u-divider>已经到底了</u-divider>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				show: false,
				scrollTop: 0,
				egImg: '/static/aidex/favicon.png',
				imgList: [{
						image: '/static/aidex/banner/2.jpg'
					},
					{
						image: '/static/aidex/banner/3.jpg'
					},
					{
						image: '/static/aidex/banner/5.jpg'
					},
					{
						image: '/static/aidex/banner/12.jpg'
					}
				],

			};
		},
		onLoad() {
			
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			imgListClick(index) {
				console.log(`点击了第${index + 1}页图片`)
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			}
		}
	};
</script>

<style lang="scss">
	@import 'index.scss';

	.banner-box {
		padding: 0 2%;
		width: 96%;
		height: 170rpx;
		margin: 30rpx 0 30rpx;
	}

	.u-swiper-wrap {
		padding: 0 10px;
	}

	.banner-pic {
		width: 47%;
		float: left;
		display: inline-block;
		margin: 0 1.5%;
	}

	.banner-pic image {
		width: 100%;
		height: 170rpx;
		border-radius: 12rpx;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	}

	.u-mode-light-info {
		background-color: #ffffff;
		color: #666666;
		border: 1px solid #e9ecf6;
		font-size: 12px;
		padding: 2px 8px;
		position: relative;
		top: -3px;
	}

	.workbench-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		padding: 15px 30rpx;
	}

	.home-icon i.icon-tongzhi {
		font-size: 22px;
	}
</style>
